// for (let i of [1, 2, 3]) {
//   console.log(i);
// }

// function createElement(type, attributes, ...children) {
//   // console.log(type, attributes, children)
//   let element = document.createElement(type);
//   for (let name in attributes) {
//     element.setAttribute(name, attributes[name]);
//   }
//   for (let child of children) {
//     // console.log('element: '+ element, 'child:' + child)
//     if(typeof child === 'string') { // 如果是本文类型可能会为字符串需要转换一下
//       child = document.createTextNode(child);
//     }
//     element.appendChild(child);
//   }
//   return element;
// }
// let a = <div id="a">
//     <span>a</span>
//     <span>b</span>
//     <span>c</span>
//   </div>
// let b = <div id="b">
//     Hello World!
//   </div>
// document.body.appendChild(b);

function createElement(type, attributes, ...children) {
  
  let element;
  if (typeof type === 'string')
    element = new ElementWrapper(type);
  else
    element = new type;

  for (let name in attributes) {
    element.setAttribute(name, attributes[name]);
  }
  for (let child of children) {
    if(typeof child === 'string') {
      child = new TextWrapper(child);
    }
    element.appendChild(child);
  }
  return element;
}

class ElementWrapper {
  constructor(type) {
    this.root = document.createElement(type);
  }
  setAttribute(name, value) {
    this.root.setAttribute(name, value);
  }
  appendChild(child) {
    // this.root.appendChild(child);
    child.mountTo(this.root);
  }
  mountTo(parent) {
    parent.appendChild(this.root);
  }
}

class TextWrapper {
  constructor(content) {
    this.root = document.createTextNode(content);
  }
  setAttribute(name, value) {
    this.root.setAttribute(name, value);
  }
  appendChild(child) {
    // this.root.appendChild(child);
    child.mountTo(this.root);
  }
  mountTo(parent) {
    parent.appendChild(this.root);
  }
}

class Div {
  constructor() {
    this.root = document.createElement('div');
  }
  setAttribute(name, value) {
    this.root.setAttribute(name, value);
  }
  appendChild(child) {
    // this.root.appendChild(child);
    child.mountTo(this.root);
  }
  mountTo(parent) {
    parent.appendChild(this.root);
  }
}


let a = <Div id="a">
    <span>a</span>
    <span>b</span>
    <span>c</span >
  </Div>

// document.body.appendChild(a);
a.mountTo(document.body)